<template>
  <div class="app-container" style="overflow:auto;">
    <el-header>
      <div class="table-filter" >
      <el-input
        class="seacher-input"
        placeholder="请输入诗集名称"
        prefix-icon="el-icon-search"
        v-model="seacherStr"
      >
      </el-input>
        <template>
          <el-select v-model="seacherShjJiType" placeholder="请选择" class="seacher-input">
            <el-option
              v-for="item in shiJiType"
              :key="item._id"
              :label="item.shiJiName"
              :value="item.index">
            </el-option>
          </el-select>
        </template>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-document-add" @click="handleCreate">
        创建
      </el-button>
      </div>
    </el-header>
    <el-table
      :data="tableDatas"
      border
      style="width: 100%"
      highlight-current-row
      v-loading="listLoading"
      element-loading-text="loading"
      max-height="400"
    >
        <el-table-column prop="xuhao" label="序号" align="center"> </el-table-column>
        <el-table-column prop="mulu" label="标题" show-overflow-tooltip align="center" width="220"></el-table-column>
        <el-table-column prop="shijiIndex" label="所属诗集" align="center" :formatter="sjFormat"></el-table-column>
        <el-table-column prop="isopern" label="歌谱" align="center" :formatter="gePuFormat"> </el-table-column>
        <el-table-column prop="isad" label="音频" align="center" :formatter="adFormat"> </el-table-column>
        <el-table-column prop="lyric" label="歌词" width="120" show-overflow-tooltip align="true"> </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button @click="handleEeit(scope.row)" type="button" size="small">编辑</el-button>
            <el-button @click="handUpdateIsupper(scope.row)" :type="scope.row.isupper ? 'success' : 'warning'" size="small" >{{ scope.row.isupper ? '下架' : '上架' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    <el-footer>
      <el-pagination
        :page-size=paginationDate.rows
        :total=paginationDate.total
        :current-page=paginationDate.cuurentPage
        :page-sizes=paginationDate.pageSizes
        layout='total, prev, pager, next, jumper, sizes, slot'
        @size-change='handleSizeChange'
        @current-change='handleCurrentChange'
        style="line-height: 30px; min-width:300px;"
      >
        <i @click="handReload" class="el-icon-refresh"></i>
      </el-pagination>
    </el-footer>

  </div>
</template>
<script>
import { getSgbItem, getShiJiType, getFilterSgbItems, updateIsUpper } from '@/cloudbaseapi/cloudbase-sgbedit'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      tableDatas: [],
      paginationDate: {
        total: 10,
        cuurentPage: 1,
        rows: 10,
        pageSizes: [10, 20, 30, 50]
      },
      listLoading: true,
      shiJiType: [],
      seacherStr: '',
      seacherShjJiType: -1
    }
  },
  created() {
    this.getSgbItemPagePage()
    this.getSgbItemPage()
  },
  mounted() {
    document.onkeypress = e => {
      console.log(e.keyCode)
      if (e.keyCode === 13) {
        this.handleFilter()
      }
    }
  },
  methods: {
    getSgbItemPage(item = 10, page = 1) {
      this.listLoading = true
      getSgbItem(item, page).then(items => {
        this.paginationDate.total = items.total
        this.tableDatas = items.data
        setTimeout(() => {
          this.listLoading = false
        },500)

      })
    },
    getSgbItemPagePage() {
      getShiJiType().then(data => {
        this.shiJiType = [{ _id: 0, shiJiName: '全部诗集', index: -1 }, ...data.data]
      })
    },
    handleCreate(row) {
      this.$router.push('sgbcreate')
    },
    handleEeit(row) {
      this.$router.push({
        name: 'SgbEdit',
        query: { id: row._id }
      })
    },
    handleSizeChange(val) {
      this.getSgbItemPage(val, this.paginationDate.cuurentPage)
      this.paginationDate.rows = val
    },
    handleCurrentChange(val) {
      this.getSgbItemPage(this.paginationDate.rows, val)
      this.paginationDate.cuurentPage = val
    },
    handReload() {
      this.getSgbItemPage(this.paginationDate.rows, this.paginationDate.cuurentPage)
    },
    handleFilter() {
      if (this.seacherStr !== '' || this.seacherShjJiType !== -1) {
        this.listLoading = true
        getFilterSgbItems(this.seacherStr, this.seacherShjJiType).then(item => {
          this.paginationDate.rows = item['total']
          this.paginationDate.total = item['total']
          this.paginationDate.cuurentPage = 1
          this.tableDatas = item['data']
          setTimeout(() => {
            this.listLoading = false
          },500)
        })
      } else {
        this.paginationDate.rows = 10
        this.getSgbItemPage(this.paginationDate.rows, this.paginationDate.cuurentPage)
      }
    },
    handUpdateIsupper(row) {
      updateIsUpper(row._id, !row.isupper).then(res => {
        console.log(res)
        row.isupper = !row.isupper
        const msg = row.isupper ? '上架' : '下架'
        Message({
          message: msg + '成功',
          type: 'success'
        })
      }).catch(err => {
        console.log(err)
        const msg = !row.isupper ? '上架' : '下架'
        Message({
          message: msg + '失败',
          type: 'info'
        })
      })
    },
    gePuFormat(row, column, cellValue, index) {
      return cellValue ? '有' : '无'
    },
    adFormat(row, column, cellValue, index) {
      return cellValue ? '有' : '无'
    },
    sjFormat(row, column, cellValue, index) {
      const shiJitype = this.shiJiType
      const item = shiJitype.filter(it => it['index'] === cellValue)
      if(item.length < 1) return ''
      return item[0]['shiJiName']
    }
  }
}
</script>

<style scoped lang="scss">
  .table-filter{
    display: flex;
    flex-direction: row;
    .seacher-input{
      width:200px;
      margin-right:20px;
    }

  }
</style>
